<template>
  <div class="bigbox">
    <div class="userbox">
      <div class="title">
        <router-link to="/Login"> 登录 </router-link>
        <span>·</span>
        <router-link to="/Re"> 注册 </router-link>
      </div>

      <!-- 表单部分 -->
      <el-form
        :model="formData"
        :rules="rules"
        ref="regFrom"
        label-width="0px"
        class="demo-ruleForm"
      >
        <!-- 用户名 -->
        <el-form-item label="" prop="name">
          <el-input
            prefix-icon="el-icon-user"
            v-model="formData.name"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码  el-icon-lock-->
        <el-form-item label="" prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="formData.password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <!-- 再次密码 -->
        <el-form-item label="" prop="password2">
          <el-input v-model="formData.password2" placeholder="确认密码">
            <i slot="prefix" class="el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <!-- 注册 -->
        <el-form-item>
          <el-button type="success" @click="submitForm('regFrom')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 验证两次密码是否一样
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        // 控制台
        console.error("请再次输入密码");
        // 验证下面
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formData.password) {
        console.error("两次输入密码不一致!");
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      formData: {
        name: "",
        password: "",
        password2: "",
      },
      rules: {
        // 用户名规则
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        // 密码规则
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z\d]{6,12}$/,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        password2: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.bigbox {
  background-color: pink;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.userbox {
  width: 300px;
  min-height: 300px;
  background-color: white;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
}
.title {
  text-align: center;
  margin-bottom: 40px;
}
.title a {
  font-size: 20px;
  font-weight: bold;
  margin: 0px auto;
  margin: 0px 10px;
  padding-bottom: 10px;
}
.title span {
  font-weight: bold;
}
.router-link-active {
  color: red;
  border-bottom: 3px solid red;
}
.el-button {
  width: 100%;
}
</style>